<script setup lang="ts">
import { ref, onMounted } from "vue";
import { alarmNum } from "@/api";
import { ElMessage } from "element-plus";

// 定义响应式数据
const patientCount = ref(3500);
const doctorCount = ref(255);
const hospitalCount = ref(25);

// 模拟数据获取
const getData = () => {
  alarmNum()
    .then((res) => {
      console.log("数据获取成功", res);
      if (res.success) {
        // 可以根据实际API返回的数据更新数值
      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="text-display-container">
    <div class="text-item">
      <span class="label">病人人数</span>
      <span class="value">{{ patientCount }}</span>
    </div>
    <div class="text-item">
      <span class="label">医生人数</span>
      <span class="value">{{ doctorCount }}</span>
    </div>
    <div class="text-item">
      <span class="label">医院数量</span>
      <span class="value">{{ hospitalCount }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.text-display-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
  background: rgba(26, 55, 95, 0.8);
  border: 1px solid rgba(31, 99, 163, 0.5);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.text-item {
  text-align: center;
  margin: 8px 0;
  white-space: nowrap;
  
  .label {
    font-size: 30px; /* 加大字号 */
    color: #7EB7FD;
    font-weight: 700; /* 加粗 */
    margin-right: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */
    letter-spacing: 1px; /* 字间距 */
    background: linear-gradient(135deg, #7EB7FD 0%, #4A90E2 100%); /* 渐变文字 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    padding: 4px 8px;
    border-radius: 4px;
  }
  
  .label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(126, 183, 253, 0.1);
    border-radius: 4px;
    z-index: -1;
  }
  
  .value {
    font-size: 45px; /* 加大数字 */
    color: #FC9010;
    font-weight: 800; /* 更粗 */
    text-shadow: 0 0 15px rgba(252, 144, 16, 0.7); /* 更强的发光效果 */
    background: linear-gradient(135deg, #FC9010 0%, #FFB347 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 4px 8px;
    border-radius: 4px;
    position: relative;
  }
  
  .value::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(252, 144, 16, 0.1);
    border-radius: 4px;
    z-index: -1;
  }
}

// 悬停效果
.text-item:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
  
  .label {
    text-shadow: 0 2px 8px rgba(126, 183, 253, 0.8);
  }
  
  .value {
    text-shadow: 0 0 20px rgba(252, 144, 16, 1);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .text-item {
    .label {
      font-size: 18px;
    }
    
    .value {
      font-size: 28px;
    }
  }
}
</style>